"use client";
import { useEffect, useState } from "react";
import { useParams, useRouter } from "next/navigation";
import useSWR, { mutate as gmutate } from "swr";
import { FolderKanban, Archive, Trash2, Check, AlertTriangle } from "lucide-react";
import { api, fetcher } from "@/lib/client/fetcher";
import type { ArtifactDTO, MemoryDTO, ProjectDTO } from "@/lib/client/types";
import { Button, Spinner, Tabs, cn, toast } from "@/components/ui";
import { ColorPicker } from "@/components/projects/project-shared";
import { ArtifactsTab, ConversationsTab, FilesTab, InstructionsTab, MemoryTab, NotesTab, type ProjectFile } from "@/components/projects/project-tabs";

interface Resp { project: ProjectDTO; files: ProjectFile[]; memories: MemoryDTO[]; artifacts: ArtifactDTO[] }
type Tab = "conversations" | "instructions" | "files" | "memory" | "notes" | "artifacts";

export default function ProjectPage() {
  const { id } = useParams<{ id: string }>(); const router = useRouter();
  const { data, error, mutate } = useSWR<Resp>(`/api/projects/${id}`, fetcher);
  const [tab, setTab] = useState<Tab>("conversations");
  const [name, setName] = useState(""); const [description, setDescription] = useState(""); const [editingHead, setEditingHead] = useState(false);
  useEffect(() => { if (data) { setName(data.project.name); setDescription(data.project.description ?? ""); } }, [data]);
  const refresh = () => { void mutate(); void gmutate("/api/projects"); };
  async function patch(p: Record<string, unknown>, msg?: string) { try { await api(`/api/projects/${id}`, { method: "PATCH", json: p }); if (msg) toast(msg, "ok"); refresh(); } catch (e) { toast((e as Error).message, "error"); } }
  async function saveHead() { await patch({ name: name.trim() || data?.project.name, description: description.trim() || null }, "Projet mis à jour"); setEditingHead(false); }
  async function archive() { if (!confirm("Archiver ce projet ? Ses conversations restent accessibles dans l'historique.")) return; await patch({ archived: true }, "Projet archivé"); router.push("/"); }
  async function del() { if (!confirm("Supprimer définitivement ce projet ? Les conversations sont conservées mais détachées ; les fichiers et souvenirs du projet sont supprimés.")) return; await api(`/api/projects/${id}`, { method: "DELETE" }); void gmutate("/api/projects"); toast("Projet supprimé", "ok"); router.push("/"); }

  if (error) return <div className="p-8 text-sm text-danger">Projet introuvable.</div>;
  if (!data) return <div className="flex flex-1 items-center justify-center"><Spinner className="h-5 w-5" /></div>;
  const p = data.project;
  const tabs: { value: Tab; label: string; count?: number }[] = [
    { value: "conversations", label: "Conversations", count: p.conversation_count }, { value: "instructions", label: "Instructions" }, { value: "files", label: "Fichiers", count: data.files.length },
    { value: "memory", label: "Mémoire", count: data.memories.length }, { value: "notes", label: "Notes" }, { value: "artifacts", label: "Artefacts", count: data.artifacts.length },
  ];
  return (
    <div className="min-h-0 flex-1 overflow-y-auto">
      <div className="mx-auto w-full max-w-4xl px-4 py-6 md:px-8">
        <div className="mb-5 flex flex-wrap items-start gap-3">
          <span className="mt-1.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl" style={{ background: `${p.color ?? "#6d9cff"}22`, color: p.color ?? "var(--accent)" }}><FolderKanban className="h-5 w-5" /></span>
          <div className="min-w-0 flex-1">
            {editingHead ? (
              <div className="space-y-2">
                <input value={name} onChange={e => setName(e.target.value)} maxLength={120} className="input text-lg font-semibold" autoFocus />
                <input value={description} onChange={e => setDescription(e.target.value)} maxLength={2000} className="input text-[13px]" placeholder="Description" />
                <div className="flex items-center gap-3"><ColorPicker value={p.color} onChange={c => patch({ color: c })} /><span className="flex-1" /><Button variant="ghost" size="sm" onClick={() => setEditingHead(false)}>Annuler</Button><Button variant="primary" size="sm" onClick={saveHead}><Check className="h-3.5 w-3.5" /> Enregistrer</Button></div>
              </div>
            ) : (
              <button onClick={() => setEditingHead(true)} className="group block w-full text-left" title="Modifier le nom, la description et la couleur">
                <h1 className="truncate text-xl font-semibold tracking-tight group-hover:text-accent">{p.name}</h1>
                <p className="mt-0.5 text-[13px] text-muted">{p.description || "Ajouter une description…"}</p>
              </button>
            )}
          </div>
        </div>

        <div className="mb-5 -mx-1 overflow-x-auto px-1">
          <Tabs value={tab} onChange={setTab} items={tabs.map(t => ({ value: t.value, label: <span>{t.label}{t.count != null ? <span className="ml-1 text-muted">{t.count}</span> : null}</span> }))} />
        </div>

        <div className={cn("anim-fade-up")} key={tab}>
          {tab === "conversations" && <ConversationsTab project={p} />}
          {tab === "instructions" && <InstructionsTab project={p} onSaved={refresh} />}
          {tab === "files" && <FilesTab project={p} files={data.files} onChanged={refresh} />}
          {tab === "memory" && <MemoryTab project={p} memories={data.memories} onChanged={refresh} />}
          {tab === "notes" && <NotesTab project={p} />}
          {tab === "artifacts" && <ArtifactsTab artifacts={data.artifacts} />}
        </div>

        <section className="mt-12 rounded-2xl border border-danger/30 p-5">
          <h2 className="mb-1 flex items-center gap-2 text-[13px] font-semibold uppercase tracking-wider text-danger"><AlertTriangle className="h-4 w-4" /> Zone sensible</h2>
          <p className="mb-3 text-[13px] text-muted">Archiver masque le projet de la barre latérale sans rien supprimer. Supprimer efface les fichiers, notes et souvenirs du projet ; les conversations sont conservées sans projet.</p>
          <div className="flex flex-wrap gap-2"><Button variant="outline" onClick={archive}><Archive className="h-4 w-4" /> Archiver</Button><Button variant="danger" onClick={del}><Trash2 className="h-4 w-4" /> Supprimer le projet</Button></div>
        </section>
      </div>
    </div>
  );
}